import { getColorTextLoadMap, tooltipLength } from '@/utils';
import { Button, Switch, Tooltip } from 'antd';
import { ProcdefManageAPI } from '../common/type';
import pageStyles from '@/common/pageLayout.less';
import { Fragment } from 'react';
import { EyeOutlined } from '@ant-design/icons';

/** 表格功能操作 */
const getManageFunctions = (
  /** 资源权限参数 */
  curRes: Record<string, any>,
  /** 数据操作参数 */
  operateFnc: ProcdefManageAPI.IOperationClick,
  /** 数据操作对象 */
  record: Record<string, any>,
) => {
  /** 功能操作集 */
  let operationList: any = [];

  /** 查看 */
  const View = !!curRes['/activitiController/getProcdefImage/{procDefID}'] && (
    <Fragment key={record?.id + 'EyeOutlined'}>
      <Button
        className="manageBtntTxtStyle"
        onClick={() => {
          operateFnc?.onView(record);
        }}
        type={'link'}
        size={'small'}
        icon={<EyeOutlined />}
      >
        查看
      </Button>
    </Fragment>
  );

  /** 一个按钮都没有时展示*/
  const Disable = (
    <Fragment key={record?.id + '--Disable'}>
      <Button style={{ color: '#000' }} className="manageBtntTxtStyle" type={'link'} size={'small'} disabled>
        --
      </Button>
    </Fragment>
  );

  operationList = [View];
  operationList = operationList?.filter((itemBtn: any) => itemBtn);
  return operationList && operationList?.length > 0 ? operationList : [Disable];
};

/**
 * 表格信息 展示和操作
 * @returns
 */
const getTableColumns = (
  /** 资源权限参数 */
  curRes: Record<string, any>,
  /** 数据操作参数 */
  operateFnc: ProcdefManageAPI.IOperationClick,
) => {
  return [
    // {
    //   title: '编号',
    //   dataIndex: 'id',
    //   key: 'id',
    //   width: 110,
    //   visible: true,
    //   unDrag: true,
    //   fixed: 'left',
    //   sorter: (a: any, b: any) => (a.id > b.id ? 1 : -1),
    //   render: (text: string | null) => {
    //     return (
    //       <Tooltip title={tooltipLength(text, 100)}>
    //         <span
    //           className={pageStyles['over-flow-hidden']}
    //           style={{ maxWidth: 100 }}
    //         >
    //           {text ? text : '--'}
    //         </span>
    //       </Tooltip>
    //     );
    //   },
    // },
    {
      title: '所属单位',
      dataIndex: 'ownCompanyName',
      key: 'ownCompanyName',
      width: 150,
      fixed: 'left',
      visible: true,
      sorter: (a: any, b: any) => (a.ownCompanyID > b.ownCompanyID ? 1 : -1),
      render: (text: string) => {
        let { colorText, color } = getColorTextLoadMap(text);
        return (
          <Tooltip title={colorText}>
            <span style={{ color: color }} className={pageStyles['over-flow-hidden']}>
              {colorText ? colorText : '--'}
            </span>
          </Tooltip>
        );
      },
    },
    {
      title: '是否科研机构',
      dataIndex: 'deptFlag',
      key: 'deptFlag',
      width: 150,
      fixed: 'left',
      visible: true,
      sorter: (a: any, b: any) => (a.deptFlag > b.deptFlag ? 1 : -1),
      render: (text: number) => {
        return (
          <Tooltip>
            <span className={pageStyles['over-flow-hidden']}>{text == 0 ? '否' : '是'}</span>
          </Tooltip>
        );
      },
    },
    {
      title: '流程名称',
      dataIndex: 'name',
      key: 'name',
      width: 240,
      visible: true,
      unDrag: true,
      sorter: (a: any, b: any) => (a.name > b.name ? 1 : -1),
      render: (text: string | null) => {
        return (
          <Tooltip title={tooltipLength(text, 100)}>
            <span className={pageStyles['over-flow-hidden']}>{text ? text : '--'}</span>
          </Tooltip>
        );
      },
    },
    {
      title: '发布时间',
      dataIndex: 'deployTime',
      key: 'deployTime',
      width: 150,
      visible: true,
      sorter: (a: any, b: any) => (a.deployTime > b.deployTime ? 1 : -1),
      render: (text: string | null) => {
        return (
          <Tooltip title={text}>
            <span className={pageStyles['over-flow-hidden']}>{text ? text : '--'}</span>
          </Tooltip>
        );
      },
    },
    {
      title: '是否默认',
      dataIndex: 'isDefault',
      key: 'isDefault',
      width: 120,
      visible: true,
      sorter: (a: any, b: any) => a.isDefault - b.isDefault,
      render: (text: string) => {
        let newText = '';
        let textColor = '';
        if (text == '0') {
          newText = '否';
          textColor = '#ff3700';
        } else if (text == '1') {
          newText = '是';
          textColor = '#42c900';
        }
        return <span style={{ color: textColor }}>{newText ? newText : '--'}</span>;
      },
    },
    {
      title: '工单类别',
      dataIndex: 'orderTypeName',
      key: 'orderTypeName',
      width: 150,
      visible: true,
      sorter: (a: any, b: any) => (a.orderTypeName > b.orderTypeName ? 1 : -1),
      render: (text: string) => {
        let { colorText, color } = getColorTextLoadMap(text);
        return (
          <Tooltip title={colorText}>
            <span className={pageStyles['over-flow-hidden']} style={{ color: color }}>
              {colorText ? colorText : '--'}
            </span>
          </Tooltip>
        );
      },
    },
    {
      title: '流程类别',
      dataIndex: 'categoryName',
      key: 'categoryName',
      width: 120,
      visible: true,
      sorter: (a: any, b: any) => (a.categoryName > b.categoryName ? 1 : -1),
      render: (text: string) => {
        let { colorText, color } = getColorTextLoadMap(text);
        return (
          <Tooltip title={colorText}>
            <span className={pageStyles['over-flow-hidden']} style={{ color: color }}>
              {colorText ? colorText : '--'}
            </span>
          </Tooltip>
        );
      },
    },
    {
      title: '业务类别',
      dataIndex: 'businessCategoryName',
      key: 'businessCategoryName',
      width: 120,
      visible: true,
      sorter: (a: any, b: any) => (a.businessCategoryName > b.businessCategoryName ? 1 : -1),
      render: (text: string) => {
        let { colorText, color } = getColorTextLoadMap(text);
        return (
          <Tooltip title={colorText}>
            <span className={pageStyles['over-flow-hidden']} style={{ color: color }}>
              {colorText ? colorText : '--'}
            </span>
          </Tooltip>
        );
      },
    },
    {
      title: '激活状态',
      dataIndex: 'suspendState',
      key: 'suspendState',
      width: 120,
      visible: true,
      sorter: (a: any, b: any) => (a.suspendState > b.suspendState ? 1 : -1),
      render: (text: string | null, record: Record<string, any>) => {
        return (
          <Switch
            checkedChildren="激活"
            unCheckedChildren="挂起"
            checked={text == '1' ? true : false}
            onChange={(checked: boolean, e: any) => {
              e?.stopPropagation();
              operateFnc.onChange(record, checked);
            }}
          />
        );
      },
    },
    {
      title: '描述',
      dataIndex: 'description',
      key: 'description',
      width: 200,
      visible: true,
      render: (text: string | null) => {
        return (
          <Tooltip title={tooltipLength(text, 100)}>
            <span className={pageStyles['over-flow-hidden']}>{text ? text : '--'}</span>
          </Tooltip>
        );
      },
    },
    {
      title: '版本',
      dataIndex: 'version',
      key: 'version',
      width: 100,
      visible: false,
      sorter: (a: any, b: any) => (a.version > b.version ? 1 : -1),
      render: (text: string | null) => {
        return <span>{text ? text : '--'}</span>;
      },
    },
    {
      title: '部署编号',
      dataIndex: 'deployID',
      key: 'deployID',
      width: 120,
      visible: false,
      sorter: (a: any, b: any) => (a.deployID > b.deployID ? 1 : -1),
      render: (text: string | null) => {
        return <span>{text ? text : '--'}</span>;
      },
    },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      width: 90,
      visible: true,
      unDrag: true,
      fixed: 'right',
      render: (_text: any, record: any) => {
        return (
          <div
            style={{
              display: 'flex',
            }}
          >
            {getManageFunctions(curRes, operateFnc, record)}
          </div>
        );
      },
    },
  ];
};

export { getTableColumns };
